<template>
  <div>
      <Button type="success" calss="addRole" @click="$router.push('/admin/addrole')" :disabled="add">添加角色</Button>
      <Input suffix="ios-search" placeholder="Enter text" style="width: auto" 
        v-model="searchKey"
        @on-enter="search"/>
      
      
      <Table border ref="table" :columns="columns" :data="tableData">
        <template slot-scope="{ index }" slot="index">
            {{index + 1}}
        </template>
        <template slot-scope="{ row }" slot="createTime">
            {{row.createTime | moment}}
        </template>
        <template slot-scope="{ row }" slot="updateTime">
            {{row.updateTime | moment}}
        </template>
        <template slot-scope="{ row }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="editRole(row)" :disabled="edit">编辑</Button>
            <Button type="error" size="small" @click="deleteRole(row)" :disabled="del">删除</Button>
        </template>
      </Table>

      <!-- 分页 -->
      <Page :total="total" :page-size="params.limit" @on-change="changPage" v-if="update"></Page>

      <!-- 删除材料对话框 -->
      <Modal v-model="showDelete" @on-cancel="cancel">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete {{curRole.rolename}}</span>
        </p>
        <div style="text-align:center">
            <p>该删除操作无法撤销</p>
            <p>确定删除？</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="delMaterial">Delete</Button>
        </div>
      </Modal>
  </div>
</template>

<script>
export default {
  data(){
    return{
      columns: [
        {
            title: '#',
            slot:'index',
            width:'60px',
            align: 'center'
        },
        {
            title: 'ID',
            key: 'id',
            align: 'center'
        },
        {
            title: '角色名称',
            key: 'rolename',
            align: 'center'
        },
        {
            title: '创建时间',
            slot: 'createTime',
            align: 'center'
        },
        {
            title: '更新时间',
            slot: 'updateTime',
            align: 'center'
        },
        {
            title: '描述',
            key: 'description',
            align: 'center'
        },
        {
            title: '操作',
            slot:'action',
            align: 'center'
        }
      ],
      tableData: [],
      //分页配置
      update:true,
      params:{
        page:1,
        limit:10,
        key:''
      },
      total:0,
      searchKey:'',
      // 删除框配置
      showDelete:false,
      curRole:'',
      modal_loading: false, 
      //用户拥有的权限
      add:true,
      edit:true,
      del:true          
    }
  },
  created(){
    this.getRoleList(this.params)

    //判断权限
    let temp = JSON.parse(window.sessionStorage.getItem('authorities'))
    for(let i = 0; i < temp.length; i++){
      temp[i] = JSON.parse(temp[i])
    }
    for(let i = 0; i < temp.length; i++){
      if(temp[i].authority == 'role:add'){
        this.add = false
      }
      if(temp[i].authority == 'role:edit'){
        this.edit = false
      }
      if(temp[i].authority == 'role:del'){
        this.del = false
      }
    }
  },
  methods:{
    async getRoleList(params){
      const {data:res} = await this.$axios.get('/role/list',{
        params:params
      })
      // console.log(res)
      this.tableData = res.page.list
      this.total = res.page.totalCount
    },
    changPage(page){
      // console.log(page)
      this.params.page = page
      this.getRoleList(this.params)
    },
    search(){
      this.params.key = this.searchKey.trim()
      this.getRoleList(this.params)
    },
    //编辑用户
    editRole(row){
      this.$router.push({
        path:'/admin/editrole',
        query:{
          role:row
        }
      })
    },
    //删除用户
    deleteRole(row){
      this.curRole = row
      this.showDelete = true
    },
    async delMaterial(){
      this.modal_loading = true
      const {data:res} = await this.$axios.get('/role/delete/' + this.curRole.id)
      console.log(res)
      //重新获取数据
      this.params.page = 1
      this.getRoleList(this.params)
	    // 移除组件(组件强制刷新)
	    this.update = false
	    // 在组件移除后，重新渲染组件
	    // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
	    this.$nextTick(() => {
	        this.update = true
	    })    
      this.modal_loading = false
      this.showDelete = false
      this.curRole = {}  
      this.$Message.info(res.msg); 
    },
    cancel(){
      this.curRole = {}
    }
  }
}
</script>

<style scoped>
  .ivu-btn-success{
    margin:1vh 1vw;
  }
  .ivu-page{
    margin-top:20px;
    text-align:center
  }
</style>